<template>
	<view class="">

		<view class="mask" v-if="taskShow">
			<view class="mask-img">
				<view class="mask-title">
					今日签到领取{{integration}}碳积分
				</view>
				<view class="mask-aside">
					<view class="mask-list" :style="{width: (536 / topNum) + 'rpx'}"
						v-for="(item,index) in signPop.above" :key="index">
						<image v-if="item.is_sign == 1 || item.is_sign == 4" class="mask-icon"
							:style="{marginLeft:((536 / topNum)-36)/2 +'rpx'}" :src="icon1" mode="widthFix"
							@click="receiveFn(item,4)"></image>
						<image v-else-if="item.is_sign == 3 " class="mask-icon"
							:style="{marginLeft:((536 / topNum)-36)/2 +'rpx'}" :src="icon2" mode="widthFix"
							@click="receiveFn(item,1)">
						</image>
						<image v-else-if="item.is_sign == 2 " class="mask-icon"
							:style="{marginLeft:((536 / topNum)-36)/2 +'rpx'}" :src="icon2" mode="widthFix">
						</image>
						<view class="mask-money"
							:style="{width: (536 / topNum) + 'rpx',color: item.is_sign == 3 ? '#FF6B00' : '#999999'}">
							{{item.integration}}
						</view>
					</view>
					<view class="mask-border">
						<view class="mask-borderTops">
							<view class="mask-borderTop" :style="{width: ((100 / topNum)) + '%' }"
								v-for="item in topNum">
								<view class="mask-top-drop">

								</view>
							</view>
						</view>
						<view class="mask-borderTopso">
							<view class="mask-borderTop" :style="{width: ((100 / bottomNum)) + '%' }"
								v-for="item in bottomNum">
								<view class="mask-top-drop">

								</view>
							</view>
						</view>
						<view class="mask-border-top" :style="{width: ((100 / topNum)*topNumLength) + '%' }">
						</view>

						<view class="mask-border-right" v-if="bottomNumLength > 0">

						</view>
						<view class="mask-border-bottom" v-if="bottomNumLength > 0"
							:style="{width: ((100 / bottomNum)*bottomNumLength) + '%' }">

						</view>
						<view class="mask-list" :style="{width: (536 / topNum) + 'rpx'}"
							v-for="(item,index) in signPop.above" :key="index">
							<view class="mask-days" :style="{width: (536 / topNum) + 'rpx' }">
								{{ nowTime == item.date ? '今日' :  item.day}}
							</view>
						</view>
						<view class="mask-lists" :style="{width: (534 / bottomNum) + 'rpx' }"
							v-for="(item,index) in belowList" :key="index">
							<image class="mask-icons" v-if="item.is_sign == 1 || item.is_sign == 4"
								:style="{marginLeft: ((534 / bottomNum)-36)/2 +'rpx'}" :src="icon1" mode="widthFix"
								@click="receiveFn(item,4)"></image>
							<image class="mask-icon" v-else-if="item.is_sign == 3 "
								:style="{marginLeft:((534 / bottomNum)-36)/2 +'rpx'}" :src="icon3" mode="widthFix"
								@click="receiveFn(item,1)">
							</image>
							<image class="mask-icon" v-else-if="item.is_sign == 2 "
								:style="{marginLeft:((534 / bottomNum)-36)/2 +'rpx'}" :src="icon3" mode="widthFix">
							</image>
							<view class="mask-moneys"
								:style="{width: (534 / bottomNum) + 'rpx' ,color: item.is_sign == 3 ? '#FF6B00' : '#999999'}">
								{{item.integration}}
							</view>
						</view>
					</view>
					<view class="mask-lists" :style="{width: (536 / bottomNum) + 'rpx' }"
						v-for="(item,index) in belowList" :key="index">
						<view class="mask-dayss" :style="{width: (546 / bottomNum) + 'rpx' }">
							{{ nowTime == item.date ? '今日' :  item.day}}
						</view>
					</view>

				</view>
				<view class="mask-button" @click="signFn">
					签到
				</view>
			</view>
			<view class="mask-closes">
				<image class="mask-close" :src="icon4" mode="widthFix" @click="maskFn"></image>
			</view>
		</view>
		<view :class="taskShow ?  'bigBox' : ''">

			<view class="loading" v-if="showLoading">
				<u-loading mode="circle" size="60" :show="true">加载中</u-loading>
			</view>

			<view class="box" v-else>

				<view class="header">
					<u-row gutter="16" class="aside_card1_row">
						<u-col span="2">
							<view class="demo-layout bg-purple">
								<img v-if="makeHome.avatarUrl_open == 1" 　:src="makeHome.avatarUrl" alt="">
							</view>
						</u-col>
						<u-col span="6">
							<view class="demo-layout bg-purple">
								<p class="header_integral">{{makeHome.integration ? makeHome.integration : 0}}积分</p>
							</view>
						</u-col>
					</u-row>
					<view class="header_detailed" @click="integrationFn">
						<span v-if="makeHome.integration_open == 1" @click="integrationFn">赚取积分明细</span>
						<img v-if="makeHome.integration_open == 1" class="header_detailed_img" :src="icon5" alt="">
					</view>
				</view>
				<view class="exchange" v-if="makeHome.shop == 1" @click="shopFn">
					<img :src="icon6" alt="" alt="">
					<span class="exchange_integral">兑换商城</span>
				</view>
				<view class="exchanges" v-if="makeHome.withdrawal == 1">
					<img :src="icon7" alt="" alt="">
					<span class="exchange_integral" @click="cashFn">去提现</span>
				</view>
				<view class="card" v-if="makeHome.sign && makeHome.sign.days.length > 0">
					<u-row gutter="16">
						<u-col span="4">
							<view class="demo-layout bg-purple">
								<img class="card_img1" :src="icon8" alt="" alt="">
							</view>
						</u-col>
						<u-col span="8">
							<view class="demo-layout bg-purple-light">
								<view class="card_span1">
									{{makeHome.activity_time ? makeHome.activity_time : ''}}
								</view>
							</view>
						</u-col>
					</u-row>
					<view class="scroll-views">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true"
							:scroll-left="scrollLeft" v-if="makeHome.sign && makeHome.sign.days.length > 0">
							<view class="card_list_data">
								<view class="card_list" v-for="(item,index) in   makeHome.sign.days " :key="index">
									<view class="card_lists" v-if="makeHome.sign.days.length -1 != index">
										<p class="card_list_p"
											:style="{color:(item.is_sign == 1 || item.is_sign == 2) ? '#FF6B00' : '#666'}">
											{{'+' +item.integration}}
										</p>
										<img class="card_img2" v-if="item.is_sign == 2" :src="icon3" alt="">
										<p class="card_list_p1" v-if="item.is_sign == 2">已签</p>
										<img class="card_img3" v-else-if="item.is_sign == 3" @click="receiveFn(item,1)"
											:src="icon2" alt="">
										<img class="card_img4" v-else-if="item.is_sign == 1" @click="receiveFn(item,1)"
											:src="icon9" alt="">
										<p v-else-if="item.is_sign == 4" class="card_list_p2">待领取</p>
									</view>
									<view class="card_list_time" v-if="makeHome.sign.days.length -1 != index">
										{{item.day}}
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="card_list_rights" v-if="makeHome.sign && makeHome.sign.days.length > 0">
							<view class="card_list_right"
								:style="{backgroundImage: 'url(' + makeHome.image + ')','background-repeat':'no-repeat', backgroundSize:'100% 100%'}">
								<p class="card_list_right_money">
									{{makeHome.sign ? makeHome.sign.days[makeHome.sign.days.length-1].integration : ''}}
								</p>
								<P class="card_list_times">
									{{makeHome.sign ? makeHome.sign.days[makeHome.sign.days.length-1].day : ''}}
								</P>
							</view>
						</view>
					</view>

					<p class="card_bottom">{{makeHome.activity_end}}</p>
				</view>
				<view class="aside">
					<p class="aside_title">新手任务</p>
					<view class="aside_card1">
						<u-row gutter="16" class="aside_card1_row" v-for="(item,index) in  taskLists" :key="index">
							<u-col span="2">
								<view class="">
									<img class="aside_card1_img1" :src="item.img" alt="" alt="">
								</view>
							</u-col>
							<u-col span="8">
								<view class=" aside_card1_two">
									<view class="aside_card1_top">
										{{item.title}}
										<img v-if="item.pic" class="aside_card1_img2" :src="item.pic" alt="">

										<view v-if="item.label" class="aside_card1_activity">
											{{item.label}}
										</view>
										<span v-else="item.integration"
											class="aside_card1_span1">{{ item.integration ?   '+' + item.integration : ''}}</span>
									</view>
									<view class="aside_card1_bottom" v-if="">
										{{item.msg ? item.msg : item.complete}}
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<view class=" aside_card1_three">
									<view class="aside_card1_button" @click="receiveFn(item,2)">{{item.describe}}</view>
								</view>
							</u-col>
						</u-row>
					</view>
					<view class="lookMore" v-if="makeHome.fangroup_task && makeHome.fangroup_task.list.length > 3">
						<img v-if="lookMoreShow" class="lookMore_img" :src="icon10" alt="" @click="lookFn(1)">
						<span v-if="lookMoreShow" @click="lookFn(1)">查看更多</span>
						<span v-else @click="lookFn(2)">收起</span>

					</view>
				</view>
				<view class="aside">
					<p class="aside_title">日常任务</p>
					<view class="aside_card1">
						<u-row gutter="16" class="aside_card1_row" v-for="(item,index) in makeHome.Fangroup_daily.list"
							:key="index">
							<u-col span="2">
								<view class="demo-layout bg-purple">
									<img class="aside_card1_img1" mode="heightFix" :src="item.img" alt="" alt="">
								</view>
							</u-col>
							<u-col span="8">
								<view class="demo-layout bg-purple-light aside_card1_two">
									<view class="aside_card1_top">
										{{item.title}}
										<img v-if="item.pic" class="aside_card1_img2" :src="item.pic" alt="">
										<span v-if="item.integration"
											class="aside_card1_span1">{{'+' + item.integration}}</span>
										<view v-if="item.label" class="aside_card1_activity">
											{{item.label}}
										</view>
									</view>
									<view class="aside_card1_bottom">
										{{item.msg ? item.msg : item.complete}}
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<view class="demo-layout bg-purple aside_card1_three">
									<view v-if="item.describe == '已完成'" class="aside_card1_button1">{{item.describe}}
									</view>
									<view v-else class="aside_card1_button" @click="receiveFn(item,3)">{{item.describe}}
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
					<view class="footer" 　@click="ruleFn">
						活动规则
					</view>

				</view>

				<view class="popup" v-if="popupShow">
					<img class="popup_img1" :src="makeHome.avatarUrl" alt="">
					<view class="popup_text">
						{{integration}}
					</view>
				</view>
				<view class="popup" v-if="errorShow">
					<view class="errorShows">
						{{errorShowText}}
					</view>
				</view>


			</view>
			<!-- 广告组件 -->
			<view>
				<coral-adv :appid="appid" :type="type" 　 :isshow="isshow" @loadCb="loadCb" @finishedCb="finishedCb"
					@quitCb="quitCb" @errorCb="errorCb"></coral-adv>
			</view>
			<!-- 公众号组件 -->
			<u-modal v-model="publicShow" width="640" :show-title="false" confirm-color="#0da297" confirm-text="关闭"
				@confirm="handlePublicConfirm">
				<view class="public-slot-content">
					<official-account class="public"></official-account>
				</view>
			</u-modal>

		</view>
		<view class="popups" v-if="advertisementShow">
			<u-loading class="uLoading" mode="circle" size="60" :show="true"></u-loading>
			<view class="uLoading-text">
				加载中...
			</view>
		</view>
	</view>
</template>

<script>
	import getDateTime from '@/components/getDateTimes/getDateTimes.js';
	import {
		getIntegralUrl
	} from '@/env.js';
	export default {
		components: {

		},
		data() {
			return {
				icon1: this.$imgUrl + 'makeMoney/tanjifen-icon.png',
				icon2: this.$imgUrl + 'makeMoney/buqiandao.png',
				icon3: this.$imgUrl + 'makeMoney/yiqiandao.png',
				icon4: this.$imgUrl + 'makeMoney/makeClose.png',
				icon5: this.$imgUrl + 'makeMoney/youjiatou.png',
				icon6: this.$imgUrl + 'makeMoney/duihuan.png',
				icon7: this.$imgUrl + 'makeMoney/money.png',
				icon8: this.$imgUrl + 'makeMoney/xianshifuli.png',
				icon9: this.$imgUrl + 'makeMoney/linqu.png',
				icon10: this.$imgUrl + 'makeMoney/xiala.png',


				makeHome: {},
				appid: 100073,
				type: 2,
				isshow: false,
				popupShow: false, // 弹出框
				errorShow: false, // 接口返回失败弹窗
				errorShowText: '', // 失败弹出的内容
				month: '', // 签到时间
				integration: '', // 签到领取的积分
				task_id: '', // 任务id
				types: '', // 任务类型
				showLoading: false,
				taskList: [], // 新手任务3项
				taskLists: [],
				lookMoreShow: false,
				advertisementShow: false, // 广告loading
				//公众号
				hasPublic: false,
				publicShow: false,
				// 弹框
				signPop: {},
				taskShow: false, // 用来控制首页签到弹框的展示
				topNum: 7,
				bottomNum: 3,
				belowList: [], // 签到弹框下面的数据
				nowTime: '', // 当日时间
				newDate: null, // 当前时间戳
				topNumLength: 0,
				bottomNumLength: 0,
				/* 滚动条 */
				scrollLeft: '0',
				index: null,
				currentBanner: {},
				bottomNum: [],

			}
		},
		onReady() {
			/* this.showLoading = true; */
		},
		onLoad() {
			var timeStr = getDateTime.dateTimeStr('y-m-d'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.nowTime = timeStr
			this.newDate = new Date().getTime() / 1000;

		},
		onShow() {
			this.getSign_pop();
			this.getFangroup();
			this.lookMoreShow = false;
		},
		onHide() {
			this.getSign_pop();
			this.getFangroup();
			this.lookMoreShow = false;
		},
		onUnload() {

		},
		methods: {
			// 关注公众号
			handlePublicConfirm() {
				this.publicShow = false;
				this.getFangroup();
			},
			// 查看更多
			lookFn(type) {
				type == 1 ? this.lookMoreShow = false : this.lookMoreShow = true;
				this.lookMoreShow ? this.taskLists = this.taskList : this.taskLists = this.makeHome.fangroup_task.list;
			},
			// 跳转到赚取积分明细
			integrationFn() {
				this.$utils.jumpWebview(this.makeHome.integration_url);
			},
			// 跳转到兑换商城
			shopFn() {
				this.$utils.jumpWebview(this.makeHome.shop_url);
			},
			// 跳转到活动规则
			ruleFn() {
				this.$utils.jumpWebview(this.makeHome.task_rule);
			},
			// 跳转到提现页面
			cashFn() {

				uni.navigateTo({
					url: "/pages/makeMoney/cash"
				})
			},
			// 弹框首页close
			maskFn() {
				this.taskShow = false;
			},
			// 签到按钮
			signFn() {
				this.taskShow = false;
				this.month = this.nowTime;
				this.websiteFn(1);
				/* this.isshow = true; */
			},
			// 获取积分看视频接口
			draw(item) {
				//积分接口。
				uni.request({
					url: getIntegralUrl,
					method: 'POST',
					data: {
						userid_locked: uni.getStorageSync('userId'),
						type: 14,
						content: JSON.stringify(item),
						url: item.url,
					},
					success: res => {
						if(res.data.data.tips){
							uni.showToast({
								title: res.data.data.tips,
								icon: 'none',
								image: '../../static/images/integral.png',
							});
						}
						
					},
					fail: err => {}
				});
			},
			// 点击观看视频
			receiveFn(item, type) {

				//types 1关注公众号2参加或加入跳转H5 3去完成 4外部小程序
				this.taskShow = false;
				if (item.types == 1) {
					this.publicShow = true;
					this.hasPublic = true;
				} else {
					//type 1:补签 2：新手任务 3：日常任务 4：领取
					if (type == 1) {
						this.types = 0;
						this.month = item.for_time;
						this.integration = item.integration;

						/* this.isshow = true; */
						this.websiteFn(item);

					} else if (type == 4) {
						if (this.nowTime == item.date) {
							this.types = 0;
							this.month = item.for_time;
							this.integration = item.integration;

							/* this.isshow = true; */
							this.websiteFn(item);

						}
					} else {
						type == 2 ? this.types = 1 : type == 3 ? this.types = 2 : this.types = 0
						if (item.types == 1 || item.types == 2) {
							if (this.types == 1) {
								this.$utils.jumpWebview(item.url);
							} else if (this.types == 2) {
								uni.setStorageSync('specialUrl', item.url);
								uni.navigateTo({
									url: "/pages/webview/index?special=1"
								});
							}
							if (item.click == 13) {
								this.draw(item)
							}

						} else if (item.types == 5) {
							this.draw(item);
							this.$utils.halfScreen(item.applet_id, item.url_platform);
							
						} else if (item.types == 3) {
								console.log(99999);
							this.task_id = item.id;

							/* this.isshow = true; */
							this.websiteFn(item);
						} else if (item.types == 4) {

							if (item.click == 13) {
								let that = this;
								//积分接口。
								uni.request({
									url: getIntegralUrl,
									method: 'POST',
									data: {
										userid_locked: uni.getStorageSync('userId'),
										type: 14,
										content: JSON.stringify(item),
										url: item.url,
									},
									success: res => {
										if (res.data.result_code == 300) {
											uni.showToast({
												title: res.data.tips,
												icon: 'none',
												image: '../../static/images/integral.png',
											});
											uni.navigateToMiniProgram({
												appId: item.applet_id,
												path: item.url_platform,
												extraData: {
													'data1': 'test'
												},
												success(res) {
													// 打开成功

													that.$u.api.getChargings({
														appid: item.applet_id,
														appPath: item.url_platform
													}).then(res => {});

												}
											})

										} else {
											that.$utils.toast(res.data.data.msg);
										}
									},
									fail: err => {}
								});
							} else {
								if (item.click == 13) {
									this.draw(item)
								}
								uni.navigateToMiniProgram({
									appId: item.applet_id,
									path: item.url_platform,
									extraData: {
										'data1': 'test'
									},
									success(res) {

										this.$u.api.getChargings({
											appid: item.applet_id,
											appPath: item.url_platform,
										}).then(res => {});

									}
								})
							}
						} else {
							let that = this;
							if (item.click == 13) {
								that.draw(item)
							}

							uni.navigateToMiniProgram({
								appId: item.applet_id,
								path: item.url_platform, // 不填默认首页
								success(res) {

									that.$u.api.getchargings({
										appid: item.applet_id,
										appPath: item.url_platform
									}).then(res => {});

								}
							})
						}
					}
				}
			},
			// 弹框接口
			getSign_pop() {
				this.$u.api.getSign_pop({
					userid_locked: uni.getStorageSync('userId'),
				}).then(res => {
					this.signPop = res.data;
					this.topNum = this.signPop.above.length;
					this.bottomNum = this.signPop.below.length;
					this.belowList = res.data.below.reverse();
					this.integration = res.data.integration;
					let arr = [];
					let arrList = [];
					this.signPop.above.forEach(item => {
						if (this.newDate > item.time) {
							arr.push(item);
						}
					})

					this.topNumLength = arr.length;
					this.signPop.below.forEach(item => {
						if (this.newDate > item.time) {
							arrList.push(item);
						}
					})
					this.bottomNumLength = arrList.length;
					res.data.task_open == 1 ? this.taskShow = true : this.taskShow = false;
				}).catch(() => {});

			},
			// 主页信息
			getFangroup() {
				/* this.showLoading = true; */
				this.$u.api.getFangroup({
					userid_locked: uni.getStorageSync('userId'),
					uid: uni.getStorageSync('uid'),
					platform: 'applet'
				}).then(res => {
					/* this.showLoading = false; */
					this.makeHome = res.data;
					this.website = res.data.website;
					let arr = res.data.sign.days;
					arr.forEach((item, index) => {
						if (item.for_time == this.nowTime) {
							this.index = index;
						}
					})
					if (this.index + 1 <= 3) {
						this.scrollLeft = 0
					} else {
						this.scrollLeft = (this.index - 3) * 45
					}
					this.taskList = [];
					if (this.makeHome.fangroup_task.list.length > 3) {
						for (let i = 0; i < 3; i++) {
							this.taskList.push(this.makeHome.fangroup_task.list[i]);
							this.lookMoreShow = true;
						}
						this.taskLists = this.taskList;
					} else {
						this.taskLists = this.makeHome.fangroup_task.list;
						this.lookMoreShow = false;

					}
				}).catch(() => {});

			},
			websiteFn(item) {
				if (item != 1 && item) {
					// 1:播放视频  2：跳转h5
					if (this.website.website_open == 1) {
						if (item.click == 13) {
							this.draw(item)
						}
						this.advertisementShow = true;
						this.isshow = true;
					} else if (this.website.website_open == 2) {
						this.draw(item)
						this.$utils.jumpWebview(this.website.website_url); 
					}
				}else{
					if(this.website.website_open == 1){
						this.advertisementShow = true;
						this.isshow = true;
					}else{
					   this.$utils.jumpWebview(this.website.website_url);
					   if (this.types == 0) {
					   	this.$u.api.getFangroupSign({
					   		userid_locked: uni.getStorageSync('userId'),
					   		month: this.month,
					   		integration: this.integration
					   	}).then(res => {
					   
					   		if (res.result_code == 300) {
					   			this.taskShow = false;
					   			this.getFangroup();
					   			this.popupShow = true;
					   			setTimeout(() => {
					   				this.popupShow = false;
					   			}, 1000)
					   		} else {
					   			this.errorShowText = res.msg;
					   			this.errorShow = true;
					   			setTimeout(() => {
					   				this.errorShow = false;
					   			}, 1000)
					   		}
					   
					   	}).catch((error) => {
					   		console.log(error);
					   	});
					   } else {
					   	this.getTask();
					   }	
					}
					
				}

			},
			// 完成任务
			getTask() {

				this.$u.api.getTask({
					userid_locked: uni.getStorageSync('userId'),
					type: this.types,
					task_id: this.task_id
				}).then(res => {
					if (res.result_code == 360) {
						this.integration = res.data;
						this.getFangroup();
						this.popupShow = true;
						setTimeout(() => {
							this.popupShow = false;
						}, 1000)
					} else {
						this.errorShowText = res.msg;
						this.errorShow = true;
						setTimeout(() => {
							this.errorShow = false;
						}, 1000)
					}
				}).catch((error) => {
					console.log(error);
				});

			},
			// 判断广告是否加载完成
			loadCb(e) {
				console.log('loadCb', e.detail); // {ret: 0, msg: "广告加载完成"}
			},
			// 观看完成的回调
			finishedCb(e) {
				this.advertisementShow = false;
				setTimeout(() => {
					this.isshow = false;
				}, 50)

				if (this.types == 0) {
					this.$u.api.getFangroupSign({
						userid_locked: uni.getStorageSync('userId'),
						month: this.month,
						integration: this.integration
					}).then(res => {

						if (res.result_code == 300) {
							this.taskShow = false;
							this.getFangroup();
							this.popupShow = true;
							setTimeout(() => {
								this.popupShow = false;
							}, 1000)
						} else {
							this.errorShowText = res.msg;
							this.errorShow = true;
							setTimeout(() => {
								this.errorShow = false;
							}, 1000)
						}

					}).catch((error) => {
						console.log(error);
					});
				} else {
					this.getTask();
				}
			},

			// 中途退出的回调
			quitCb(e) {
				this.advertisementShow = false;
				setTimeout(() => {
					this.isshow = false;
				}, 50)
			},
			// 判断广告是否加载失败
			errorCb(e) {
				console.log(e, 广告加载);
				this.advertisementShow = false;
				this.isshow = false;

			},
		}
	}
</script>

<style lang="scss" scoped>
	.bigBox {
		overflow: hidden;
		height: 100vh;
	}

	.box {
		position: relative;
		width: 100%;
		height: 638rpx;
		padding-bottom: 20rpx;
		background: url(https://imageapi.cd1a.cn/uni/makeMoney/shouyebeijin.png) no-repeat;
		background-size: 100% 100%;
	}

	.header {
		img {
			display: inline-block;
			margin: 80rpx 0 0 32rpx;
			width: 88rpx;
			height: 88rpx;
		}

		.header_integral {
			margin-top: 120rpx;
			display: inline-block;
			font-size: 40rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 10rpx;
		}
	}

	.header_detailed {
		margin: 20rpx 0 0 130rpx;
		width: 226rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 33rpx;

		.header_detailed_img {
			margin: 10rpx 20rpx 0 0;
			float: right;
			width: 12rpx;
			height: 20rpx;
		}
	}

	.exchange {
		position: absolute;
		top: 80rpx;
		right: 0;
		width: 200rpx;
		height: 64rpx;
		background: #FFFFFF;
		opacity: 0.65;
		border-top-left-radius: 44rpx;
		border-bottom-left-radius: 44rpx;
		font-weight: bold;
		color: #FF6B00;

		img {
			display: inline-block;
			margin: 15rpx 20rpx 0 24rpx;
			width: 35rpx;
			height: 35rpx;
		}

		.exchange_integral {
			margin-right: 10rpx;
			float: right;
			line-height: 64rpx;
		}

	}

	.exchanges {
		position: absolute;
		top: 180rpx;
		right: 0;
		width: 200rpx;
		height: 64rpx;
		background: #FFFFFF;
		opacity: 0.65;
		border-top-left-radius: 44rpx;
		border-bottom-left-radius: 44rpx;
		font-weight: bold;
		color: #FF6B00;

		img {
			display: inline-block;
			margin: 15rpx 20rpx 0 24rpx;
			width: 35rpx;
			height: 35rpx;
		}

		.exchange_integral {
			margin-right: 35rpx;
			float: right;
			line-height: 64rpx;
		}

	}

	.card {
		padding: 0 32rpx;
		margin: 50rpx auto 0;
		width: 686rpx;
		height: 362rpx;
		background: #FFFFFF;
		border-radius: 5%;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(229, 209, 205, 0.2);
		opacity: 1;
	}

	.card_img1 {
		margin: 30rpx 0 0 0;
		width: 162rpx;
		height: 58rpx;
	}

	.card .card_span1 {
		margin: 34rpx 0 0 -10rpx;
		/* width: 344rpx; */
		height: 46rpx;
		text-align: center;
		line-height: 46rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #FF6B00;
		background: url(https://imageapi.cd1a.cn/uni/makeMoney/qiandaobeijin.png) no-repeat;
		background-size: 100% 100%;
	}

	.card .card_list {
		display: inline-block;
	}

	.card_list_data {
		width: 80%;
		display: inline-block;
	}

	.card .card_lists {
		box-sizing: border-box;
		overflow: hidden;
		display: inline-block;
		padding-top: 5rpx;
		margin: 0 0 10rpx 8rpx;
		width: 80rpx;
		height: 120rpx;
		background: #FEF6F3;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		opacity: 1;
		border: 0rpx solid #FEB189;
	}

	.card .card_bottom {
		margin-top: 30rpx;
		width: 100%;
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		color: #999999;
		line-height: 34rpx;
	}

	.card .card_img2 {
		margin: 0 27rpx;
		width: 26rpx;
		height: 26rpx;
	}

	.aside_card1_two {
		margin-left: -13rpx;
	}

	.aside_card1_three {
		margin-left: -20rpx;
	}

	.card .card_img3 {
		margin: 8rpx 15rpx 0;
		width: 50rpx;
		height: 50rpx;
	}

	.card .card_img4 {
		margin: 5rpx;
		width: 70rpx;
		height: 70rpx;
	}

	.card .card_list_p {
		margin-top: 10rpx;
		text-align: center;
		color: #FF6B00;
	}

	.card .card_list_p1 {
		width: 100%;
		text-align: center;
		height: 28rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #666666;
		line-height: 28rpx;
	}

	.card_list_p2 {
		margin-top: 20rpx;
		width: 100%;
		height: 28rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #999999;
		line-height: 28rpx;
		text-align: center;
	}

	.card .card_list_time {
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		line-height: 34rpx;
		text-align: center;
	}

	.card .card_list_right {
		/* float: left; */
		position: relative;
		box-sizing: border-box;
		width: 90rpx;
		height: 122rpx;
		display: inline-block;
	}

	.card_list_rights {
		margin-left: 5rpx;
		height: 120rpx;
		display: inline-block;
	}

	.card_list_times {
		position: absolute;
		top: 139rpx;
		left: 0;
		font-size: 24rpx;
		font-weight: 500;
		color: #111111;
		text-align: center;
	}

	.card_list_right_money {
		margin-top: 70rpx;
		text-align: center;
		height: 44rpx;
		font-size: 32rpx;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 38rpx;
	}

	.aside {
		z-index: 9;
		overflow: hidden;
		box-sizing: border-box;
		// background-color: #F5F5F5;
	}

	.aside .aside_title {
		margin: 20rpx 0 0 34rpx;
		font-size: 36rpx;
		font-weight: 800;
		color: #111111;
	}

	.aside .aside_card1 {
		padding-right: 8rpx;
		margin: 20rpx 5%;
		width: 90%;
		/* background: #FFFFFF; */
		opacity: 1;
		border-radius: 5%;
	}

	.aside_card1_img1 {
		margin: 40rpx auto 0;
		display: block;
		width: 74rpx;
		height: 74rpx;
	}

	.aside .aside_card1_top {
		margin-top: 42rpx;
		font-size: 27rpx;
		font-weight: 800;
		color: #333333;
		line-height: 38rpx;
	}

	.aside .aside_card1_bottom {
		color: #666666;
		font-size: 25rpx;
	}

	.aside .aside_card1_button {
		overflow: hidden;
		margin: 46rpx 0 0 -10rpx;
		width: 160rpx;
		height: 68rpx;
		background: linear-gradient(180deg, #FFA976 0%, #FF5A0D 100%);
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
	}


	.aside_card1_button1 {
		overflow: hidden;
		margin: 46rpx 0 0 -10rpx;
		width: 160rpx;
		height: 68rpx;
		background: #FFEFE5;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;
		font-size: 28rpx;
		border: 1rpx soild transparent;
		font-weight: 800;
		color: #FF6B00;
		line-height: 68rpx;
		text-align: center;
	}

	.aside_card1_activity {
		margin-left: 15rpx;
		display: inline-block;
		width: 126rpx;
		height: 38rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		border: 1rpx solid #FF6B00;
		font-size: 22rpx;
		font-weight: 500;
		color: #FF6B00;
		line-height: 35rpx;
		text-align: center;
	}

	.aside_card1_img2 {
		width: 28rpx;
		height: 28rpx;
	}

	.aside_card1_span1 {
		color: #FF6B00;
		font-size: 28rpx;
		font-weight: bold;
	}

	.box .footer {
		margin: 20rpx 0;
		padding-bottom: 20rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FF6B00;
		line-height: 40rpx;
		text-align: center;
	}

	.popup {
		position: fixed;
		top: 40%;
		left: 125rpx;
		width: 506rpx;
		height: 258rpx;
		background: #000000;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 0.65;
		z-index: 999999;
	}

	.popups {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.popup_img1 {
		margin: 42rpx 43% 0;
		width: 14%;
		height: 68rpx;

	}

	.popup_text {
		margin-top: 24rpx;
		font-size: 56rpx;
		font-weight: 800;
		color: #FF6B00;
		text-align: center;
	}

	.errorShows {
		text-align: center;
		line-height: 258rpx;
		font-size: 30rpx;
		color: #F5F5F5;
	}

	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
	}

	.lookMore {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
	}

	.lookMore_img {
		margin-right: 8rpx;
		width: 20rpx;
		height: 20rpx;
	}

	.mask {
		position: absolute;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, .3);
		z-index: 999;
	}

	.mask-img {
		position: relative;
		overflow: hidden;
		margin: 58rpx 7% 0;
		background: url(https://imageapi.cd1a.cn/uni/makeMoney/maketankuang.png) no-repeat;
		background-size: 100% 100%;
		width: 86%;
		height: 884rpx;
	}

	.mask-closes {
		display: flex;
		justify-content: center;
		/* 水平居中 */
	}

	.mask-close {
		margin-top: 92rpx;
		width: 82rpx;
		height: 82rpx;
	}

	.mask-title {
		margin-top: 232rpx;
		width: 100%;
		height: 62rpx;
		font-size: 44rpx;
		font-weight: bold;
		color: #FF6B00;
		text-align: center;
	}

	.mask-icon {
		margin: 0 20rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.mask-aside {
		max-width: 536rpx;
		height: 884rpx;
		position: relative;
		margin: 48rpx 8% 0;
	}

	.mask-list {
		margin-top: -20rpx;
		box-sizing: border-box;
		display: inline-block;
		overflow: hidden;
	}

	.mask-money {
		margin: -10rpx 0 10rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #FF6B00;
		font-weight: 800;
	}

	.mask-days {
		margin-top: 30rpx;
		width: 76.5rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
	}

	.mask-strip {
		position: relative;
		width: 76.5rpx;
		height: 12rpx;
		background-color: #FFECCE;
	}

	.mask-drop {
		position: absolute;
		top: 25%;
		left: 50%;
		margin-left: -3px;
		width: 6rpx;
		height: 6rpx;
		background: #FFFFFF;
		opacity: 1;
	}

	.mask-vertical {
		position: absolute;
		top: 83rpx;
		right: 0rpx;
		width: 12rpx;
		height: 160rpx;
		background: #FFECCE;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}

	.mask-lists {
		overflow: hidden;
		margin-top: 12rpx;
		display: inline-block;
		box-sizing: border-box;
	}

	.mask-moneys {
		margin: -10rpx 0 10rpx 0;
		width: 134rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FF6B00;
		font-weight: 800;
	}

	.mask-dayss {
		margin-top: 10rpx;
		width: 134rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
	}

	.mask-icons {
		margin: 0 48rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.mask-strips {
		position: relative;
		width: 134rpx;
		height: 12rpx;
		background-color: #FFECCE;
	}

	.mask-drops {
		position: absolute;
		top: 25%;
		left: 50%;
		margin-left: -3px;
		width: 6rpx;
		height: 6rpx;
		background: #FFFFFF;
		opacity: 1;
	}

	.mask-button {
		position: absolute;
		bottom: 30rpx;
		left: 19%;
		width: 62%;
		height: 100rpx;
		background: linear-gradient(180deg, #FDEBA8 0%, #FF8C0F 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx #DB5800;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		opacity: 1;
		font-size: 32rpx;
		font-weight: 800;
		color: #CF1212;
		line-height: 100rpx;
		text-align: center;

	}

	.public-slot-content {
		padding: 40rpx 20rpx 0 20rpx;
	}

	.public {
		width: 300px !important;
	}

	.public-txt {
		padding: 20rpx;
		font-size: 26rpx;
		color: 666;
	}

	.mask-border {
		dir: rtl;
		position: relative;
		margin: 0 auto;
		width: 546rpx;
		height: 166rpx;
		border: 6px solid #FFECCE;
		border-left: 0;
		box-sizing: border-box;
	}

	.mask-border-top {
		position: absolute;
		top: -12rpx;
		left: 0;
		width: 100%;
		height: 12rpx;
		background-color: #F65F08
	}

	.mask-border .mask-border-right {
		position: absolute;
		width: 12rpx;
		top: -12rpx;
		right: -12rpx;
		height: calc(100% + 24rpx);
		background-color: #F65F08
	}

	.mask-border-bottom {
		position: absolute;
		bottom: -12rpx;
		right: 0;
		height: 12rpx;
		background-color: #F65F08
	}

	.mask-top-drop {
		// display: inline-block;
		margin: 3rpx auto;
		width: 6rpx;
		height: 6rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 50%;
	}

	.mask-borderTops {
		position: absolute;
		top: -30rpx;
		left: 0;
		width: 100%;
		height: 12rpx;
		z-index: 9;
	}

	.mask-borderTopso {
		derection: rtl;
		position: absolute;
		bottom: 8rpx;
		left: 0;
		width: 100%;
		height: 12rpx;
		z-index: 9;
	}

	.mask-borderTop {
		display: inline-block;
	}

	.uLoading {
		position: absolute;
		top: 40%;
		left: 45%;
	}

	.uLoading-text {
		position: absolute;
		top: 45%;
		left: 45%;
		color: #F5F5F5;
	}

	.scroll-views {
		display: flex;
	}

	.scroll-view_H {
		box-sizing: border-box;
		white-space: nowrap;
		display: inline-block;
		width: 85%;
	}

	.containar {
		.avatarUrl {
			padding: 80rpx 0 40rpx;
			background: #fff;

			button {
				background: #fff;
				line-height: 80rpx;
				height: auto;
				width: auto;
				padding: 20rpx 30rpx;
				margin: 0;
				display: flex;
				justify-content: center;
				align-items: center;


				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}

				.jt {
					width: 14rpx;
					height: 28rpx;
				}
			}
		}

		// botton 去除边框
		button::after {
			border: none;
		}

		.nickname {
			background: #fff;
			padding: 20rpx 30rpx 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.weui-input {
				padding-left: 60rpx;
			}
		}

		.btn {
			width: 100%;

			.btn-sub {
				width: 670rpx;
				margin: 80rpx auto 0;
				height: 90rpx;
				background: #DF8585;
				border-radius: 45rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 36rpx;
				color: #fff;
			}
		}
	}
</style>